import React, { Component } from 'react';
import { StyleSheet, View, Text, Image, Animated, TouchableOpacity, findNodeHandle, UIManager } from 'react-native';
import { GLOBAL } from '../../../../config/global';
import { orderStyle, commonStyle } from '../_common/style';
const scale = GLOBAL.SCALE;
export class BockCpt extends Component {
    constructor(props) {
        super(props);
        let { visible } = props.data || {};
        this.state = {
            visible,
            startHeight: 0,
            imgObj: new Animated.Value(0),
        }
        this.onOff = true;
    }

    componentDidMount = () => { }

    // 动画
    _startAnimated = () => {
        let { isHeight, startHeight, heightObj, imgObj } = this.state;
        if (isHeight) {
            Animated.timing(imgObj, { toValue: 1, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: 0, duration: 300, }).start(() => { this.setState({ isHeight: 0 }) });
        } else {
            Animated.timing(imgObj, { toValue: 0, duration: 200, }).start()
            Animated.timing(heightObj, { toValue: startHeight, duration: 300 }).start(() => { this.setState({ isHeight: startHeight }) })
        }
    }

    _onLayout = (event) => {
        let { data } = this.props || {};
        let { listData, title } = data || {};
        let speed = 0;
        listData && listData.forEach(element => {
            speed += element.value.length;
        });
        let startHeight = 0;
        // if ('支付信息' == title && listData && listData[0].value[1] && listData[0].value[1].length == 2) {
        //     startHeight = event.nativeEvent.layout.height + 20 * scale;
        // }
        // else if ('支付信息' == title && listData && listData[0].value[1] && listData[0].value[1].length == 3) {
        //     startHeight = event.nativeEvent.layout.height + 40 * scale;
        // }
        // else if ('支付信息' == title && listData && listData[0].value[1] && listData[0].value[1].length == 3) {
        //     startHeight = event.nativeEvent.layout.height + 40 * scale;
        // }
        // else {
        startHeight = event.nativeEvent.layout.height + 10 * scale; //speed * 18 * scale;
        // }
        if ('支付信息' == title && listData && listData[0].value[1]) {
            var length = listData[0].value[1].length
            startHeight = event.nativeEvent.layout.height + length * 12 * scale;
        }
        if (this.onOff) {
            this.setState({
                startHeight,
                heightObj: new Animated.Value(startHeight),
                isHeight: startHeight,
            })
            this.onOff = false
        }
    }



    render () {
        let { data, renderView } = this.props || {};
        let { listData, title } = data || {};
        let titleImgObj = require('../../../../imgs/global/down.png');
        let { heightObj, imgObj } = this.state;

        const spin = imgObj.interpolate({
            inputRange: [0, 1],//输入值
            outputRange: ['0deg', '-90deg'] //输出值
        })
        return (
            <View style={orderStyle.block}>
                <TouchableOpacity activeOpacity={1} onPress={this._startAnimated} style={[orderStyle.blockHead, commonStyle.row2]}>
                    <Text style={commonStyle.fontTitle}>{title}</Text>
                    <View style={styles.imgBox}>
                        <Animated.Image style={[styles.imgStyle, { transform: [{ rotate: spin }] }]} source={titleImgObj}></Animated.Image>
                    </View>
                </TouchableOpacity>
                <Animated.View style={{ height: heightObj, overflow: 'hidden' }}>
                    <View ref='zy' onLayout={(event) => this._onLayout(event)} style={[styles.body]}>
                        {
                            listData && listData.length ?
                                listData.map((item, index) => {
                                    return renderView(item, index)
                                })
                                : (
                                    <Text>暂无数据</Text>
                                )
                        }
                    </View>
                </Animated.View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    imgBox: {
        paddingTop: 5 * scale,
        paddingBottom: 5 * scale,
        paddingLeft: 5 * scale,
        paddingRight: 5 * scale
    },
    imgStyle: {
        width: 10 * scale,
        height: 6 * scale
    },
    body: {
        paddingTop: 10 * scale,
        paddingBottom: 10 * scale,
    }

})